﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Home.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="Default_Home" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <link href="themes/default/css/Slide.css" rel="stylesheet" type="text/css" />
    <script src="themes/default/js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="themes/default/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#featured").tabs({
                fx: [{ opacity: "toggle", duration: 'slow' }, { opacity: "toggle", duration: 'normal' }],
                show: function (event, ui) {
                    $('#featured .ui-tabs-panel .info').hide();
                    var infoheight = $('.info', ui.panel).height();
                    $('.info', ui.panel).css('height', '0px').animate({ 'height': infoheight }, 500);
                }
            }).tabs("rotate", 3000, true);
            $('#featured').hover(
                    function () { $('#featured').tabs('rotate', 0, true); },
                    function () { $('#featured').tabs('rotate', 5000, true); }
                );
            $('#featured .ui-tabs-panel a.hideshow').click(function () {
                if ($(this).text() == 'Hide') {
                    $(this).parent('.info').animate({ 'height': '0px' }, 500);
                    $(this).text('Show');
                }
                else {
                    $(this).parent('.info').animate({ 'height': '70px' }, 500);
                    $(this).text('Hide');
                }
                return false;
            });
        });
    </script>

    <div id="featured">
        <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2">
                <img src="images/image2-small.jpg" width="110" height="55" alt="" /><span>Iphone</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3">
                <img src="images/image3-small.jpg" width="110" height="55" alt="" /><span>Samsung Galaxy</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4">
                <img src="images/image4-small.jpg" width="110" height="55" alt="" /><span>Optimus G
                    Pro</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5">
                <img src="images/image5-small.jpg" width="110" height="55" alt="" /><span>Sony Xperia
                    Z</span></a></li>
        </ul>
        <!-- First Content -->
        <!-- Second Content -->
        <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image2.png" alt="" width="700" height="300" />
            <div class="info">
                <h2>
                    <a href="#">S-phone Evolution!</a></h2>
            </div>
        </div>
        <!-- Third Content -->
        <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image3.jpg" alt="" width="700" height="300" />
            <div class="info">
                <h2>
                    <a href="#">S-phone Evolution!</a></h2>
            </div>
        </div>
        <!-- Fourth Content -->
        <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image4.jpg" width="700" height="300" alt="" />
            <div class="info">
                <h2>
                    <a href="#">S-phone Evolution!</a></h2>
            </div>
        </div>
        <!-- 5 Content -->
        <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image5.jpg" width="700" height="300" alt="" />
            <div class="info">
                <h2>
                    <a href="#">S-phone Evolution!</a></h2>
            </div>
        </div>
    </div>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphdContent" runat="Server">
    <div class="title-menu" style="text-align: left; padding-left: 5px">
        <span class="title">Tất cả các sản phẩm</span>
    </div>
    <asp:ListView runat="server" ID="lvShowAllPhones" DataSourceID="sqlGetAllPhones"
        ItemPlaceholderID="itemPhone">
        <LayoutTemplate>
            <div class="wrapper-phones">
                <ul class="ul-phones">
                    <asp:PlaceHolder runat="server" ID="itemPhone"></asp:PlaceHolder>
                </ul>
            </div>
        </LayoutTemplate>
        <ItemTemplate>
            <li class="item-phone">
                <asp:HyperLink runat="server" Target="_parent" NavigateUrl='<%# "~/PhoneDetail.aspx?id=" + Eval("Id") %>'>
                <asp:Image runat="server" ImageUrl='<%# Eval("Img") %>' CssClass="img-item-phone" />
                </asp:HyperLink>
                <h4>
                    <asp:Label runat="server" Text='<%# Eval("Name") %>' /></h4>
                    <h5><asp:Label runat="server" Text='<%# Eval("Price") %>' /> VND</h5>
                <div>
                    <button class="btn btn-primary btn-normal">
                        <span class="glyphicon glyphicon-shopping-cart"></span>Đặt hàng
                    </button>
                </div>
            </li>
        </ItemTemplate>
    </asp:ListView>
    <asp:SqlDataSource ID="sqlGetAllPhones" runat="server" ConnectionString="<%$ ConnectionStrings:MobileStoreConnStr %>"
        SelectCommand="spGetAllPhones" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
</asp:Content>
